@import url('https://fonts.cdnfonts.com/css/elastic-stretch');


/*Mise en page global du site */
html {
  height: 100%;
  overflow:scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin:0;
  padding:0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
  color: #ffffff;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.menu{
  /* set the text to 90 degrees */
  writing-mode: vertical-rl;
  position: fixed;
  z-index: 99;
  margin-left: 1em;
  opacity: 1;
  transition: all 0.5s ease;
  font-size: 1.5em;
  font-family: 'Elastic Stretch', sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1px #000;
  line-height: 1.5em;
}

.menu a{
  /* just see border without filled color */
  color: #ffffff;
  cursor: pointer;
  margin : 1.5em;
  text-shadow: 0 0 1px #000;
}

.menu a:hover{
  -webkit-text-stroke: 1px white;
  color: transparent;
}


.slide {
  padding: 1vh 5%;
  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
}



#slide1{
  background: rgb(0,0,0);
  background: linear-gradient( rgb(20, 20, 20) 45%, rgb(55, 55, 128) 100%); 
}

#slide2{
background: rgb(20, 20, 110);
background: linear-gradient(rgb(55, 55, 128) 45% , rgb(83, 55, 128) 100%); 

}

#slide3{
  background: rgb(83, 55, 128) 100%;
  background: linear-gradient( rgb(83, 55, 128) 45%, rgb(128, 55, 79) 100%); 

}

#slide4{
  background: rgb(128, 55, 79) 100%;
  background: linear-gradient(  rgb(128, 55, 79) 45%, rgb(128, 55, 55) 100%); 

}

#slide5{
  background: rgb(128, 55, 55) 100%;
  background: linear-gradient( rgb(128, 55, 55) 45%, rgb(128, 88, 55) 100%); 

}

footer{
  min-height: 30vh;
  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
  background: #000428;  /* fallback for old browsers */
  background: -webkit-linear-gradient(#004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient( #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}



.contact{
  margin-top: 50px;
  justify-content:space-evenly}

.contact img{
  width:75px;
  filter:invert(39%) sepia(0%) saturate(1390%) hue-rotate(150deg) brightness(92%) contrast(90%);

}

.contact img:hover{ 
  filter: invert(100%);
}

@media (hover: hover) and (pointer: fine) {
  #nav_bar a:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}

/* Fin de la mise en page globale du site*/










/*slide 1*/
.content-hello{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#box-hello h2{font-size: 5em;color: white;}

#box-hello h2+h2{color: antiquewhite;padding-left: 0.3em;}

#box-hello div{display: flex;}

#box-hello div h2{font-size: 3em;}

#box-hello p{
  color: white;
  font-size:2em;
  margin-left: 1em;
}

.vertical{
  border-left: 4px solid wheat; 
  height: -50vw; 
  display: inline-block;
  margin-right: 10px;
}

.line-1{
    position: relative;
    display: flex;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%); 
}

.fleche{
  display: flex;
  margin-top: 200px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.fleche h3{
  color: antiquewhite;
  font-size: 2em;
}


/*animation arrow*/
html body [data-ca3_iconfont="ETmodules"]::before {
  font-family: "ETmodules";
}
[data-ca3_icon]::before {
  font-weight: normal;
  content: attr(data-ca3_icon);
}

.ca3-scroll-down-arrow {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
background-size: contain;
background-repeat: no-repeat;
}

.ca3-scroll-down-link {
cursor:pointer;
height: 60px;
width: 80px;
line-height: 60px;
position: static;
left: 50%;
bottom: 0px;
color: #FFF;
text-align: center;
font-size: 70px;
z-index: 100;
text-decoration: none;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

-webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
-moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
animation:         ca3_fade_move_down 2s ease-in-out infinite;
}

/*animated scroll arrow animation*/
@-webkit-keyframes ca3_fade_move_down {
0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
50%  { opacity: 1;  }
100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes ca3_fade_move_down {
0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
50%  { opacity: 1;  }
100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes ca3_fade_move_down {
0%   { transform:translate(0,-20px); opacity: 0;  }
50%  { opacity: 1;  }
100% { transform:translate(0,20px); opacity: 0; }
}

/* Animation */
.anim-typewriter{
  animation: typewriter 2s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 7em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}


/*slide 2*/


#content-profil{
position: relative;
display: flex;
    align-items: center;
    flex-direction: row-reverse;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    width: 50vw;
    height: 50vh;
    background-color: rgba(241, 241, 241, 0.041); 
    /* make glass effect */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.content-text p , .content-text h4{
  margin-left: 16px;
  color: rgb(253, 245, 228);
  font-size:  1.3em;

}

#content-profil .content-text span p{
  font-size:1vw;
  margin-top: 20px;
}



#content-profil .content-text{
  width: 50%;
  text-align: left;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  
}

#buttonCv{
  background-color: rgba(187, 186, 186, 0.26);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1.2em;
  margin-top: 20px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: none;
}

#buttonCv:hover{
  background-color: rgba(187, 186, 186, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1.2em;
  margin-top: 20px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;

}



.containt-title h2 {
  font-family: 'Elastic Stretch', sans-serif;
  color: rgb(253, 245, 228);
  font-size: 4em;
}

#image-huz{
  width: 30%;
  margin: 0 auto;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;

/*make shadow*/
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

#image-huz img{
  width: 100%;
  height: 100%;
  
}


/*slide 3*/
.containt-title + p{
  margin-left: 16px;
  color: rgb(253, 245, 228);
  font-size: 1.3em;
}

.language-title{
  color: rgb(253, 245, 228);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.content-language{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;


}



#content-competences{
  background-color: rgba(241, 241, 241, 0.041); 
  /* make glass effect */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1em;
  width: 50vw;
  height: 30em;
  margin: 0 auto;
  margin-top: 5%;
}

.box-img{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.box-img img{
  width: 3em;
  height: 3em;
  filter: invert(100%);
}

#canva img{filter: invert(0%);}

.box-img p{
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: rgb(253, 245, 228);
    font-size: 0.9em;
  
}


/*slide 4*/

#content-title{
  text-align: center;
  margin: 0 auto;
  margin-top: 5em;
}

#content-title h2{
  font-size: 3em;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 0 3px #000;
  text-decoration: none;
  color: rgb(253, 245, 228);
}


#content-title p{
  font-size: 1.5em;
  font-weight: 300;
  text-transform: uppercase;
  color: rgb(253, 245, 228);
}

#content-projet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 5em;

}

#content-projet a {
    position: relative;
    width:30em;
    margin: 1em;
    overflow: hidden;
    border-radius: 1em;
    transition: all 0.3s ease-in-out;
    border: 3px solid rgb(179, 179, 179);
    background-color: rgba(124, 124, 124, 0.466);
}



#content-projet a:hover {
    transform: scale(1.1);
    border: 3px solid rgb(179, 179, 179);
    background-color: rgba(124, 124, 124, 0.466);
}



#content-projet img {
    height: 20em;
    width: 30em;
    filter: blur(5px);
    transition: all 0.3s ease-in-out;
}

#content-projet img:hover {
    filter: blur(1px);
}

.box-projet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box-projet h1 {
    position: none;
    color: rgb(253, 245, 228);
    font-size: 1.8em;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 0 3px #000;
    text-decoration: none;
    text-transform: uppercase;
}


span.tblanc3{
display: none;
}

.box-projet h1{
position: absolute;
color: rgb(253, 245, 228);
font-size: 4em;
}



#lienprojet{
  background-color: rgba(215, 172, 243, 0.74);
  color: rgb(255, 255, 255);;
  border-radius: 5px;
  padding: 15px 25px;
  text-decoration: none;
  font-size: 1.5em;
  margin-top: 20px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  
  /* make shadow*/
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);


}

@media only screen and (max-width : 1000px){

  
}


/*slide 5*/



#content-form{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 5%;
}

#content-form {
  width: 60%;
  padding: 0 20px;
  text-align: left;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


#content-form form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

}

#content-form form input{
  width: 100%;
  height: 40px;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;
  font-size: 1.2em;
  color: rgb(253, 245, 228);
  background-color: rgba(234, 228, 238, 0.74);
  border: none;
  outline: none;
  
}

#content-form form input:focus{
  border: 3px solid rgb(216, 213, 213);
}


#content-form form textarea{
  width: 100%;
  height: 100px;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;
  font-size: 1.2em;
  background-color: rgba(234, 228, 238, 0.74);
}



#content-form form input[type="submit"]{
  width: 30%;
  height: 50px;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;
  font-size: 1.2em;
  background-color: rgba(215, 172, 243, 0.74);
  cursor: pointer;
}

#content-form form button:hover{
  background-color: rgb(227, 210, 238);
}

#footer{
  color:white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#footer h1{margin:50px;}

#footer h2{
  margin:50px;
  font-size:1em;
}


/*media for mobile for menu and footer*/




@media screen and (max-width: 1000px) {

  #content-competences,#content-profil{
    width: 100%;
    height: 100%;
    backdrop-filter: none;
  }


  .competences .language-title{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: 800;
  }
  .box-img img{
    width:6em;
    height:6em;
  }
  .box-img p{
    font-size: 1.5em;
  }

  #content-profil{
    height:73em;
    flex-direction:column;
  }

  .vertical{
    font-size: 0.9em;
    margin: 0.5;
  }

  #content-profil .content-text span p{
    font-size: 1.5em;
  }
  .content-text a{
    font-size: 1.5em;
  }
  #buttonCv{
    font-size: 0.7em;
  }
}

@media only screen and (max-width: 700px){

#box-hello{
  margin-top: 5em;
}

.menu {
  writing-mode: horizontal-tb;
  margin-left: 0;
    font-size: 1em;
    background-color: rgb(71, 71, 71);
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.menu a {
    margin: 0.5em;
    text-shadow: 0 0 1px #000;
    font-size: 1.7em;
    font-weight: 800;
    margin-right: 1em;
}

#content-projet a {
    min-width: 100%;
    max-width: 100%;
    height: 15em;

}
#content-title {
    margin-top: 10em;
}
#content-title h2 {
    font-size: 2em;
}
#content-title p {
    font-size: 1em;
}
.box-projet h1 {
    font-size: 1.5em;
}

span.tblanc3{
  display: none;
}

.box-projet h1{
  position: absolute;
  color: rgb(253, 245, 228);
  font-size: 4em;
}

#content-form{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5%;
  width: 45em;
}



#content-form form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#content-form form input{
  width: 100%;
  height: 60px;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;
  color: rgb(253, 245, 228);
  background-color: rgba(234, 228, 238, 0.74);
}

#content-form form input:focus{
  border: #000428 1px solid;
}

#content-form form textarea{
  width: 100%;
  height: 100px;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;

  background-color: rgba(234, 228, 238, 0.74);
}

#content-form form input[type="submit"]{
  width: 40%;
  height: 65px;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
  font-size: 2em;
  background-color: rgba(215, 172, 243, 0.74);
  cursor: pointer;
  border: none;
}
}

@media only screen and (max-device-width: 580px){
 
body{
  overflow-x: hidden;
}

  #box-hello{
    margin-top: 5em;
  }

  .menu {
    writing-mode: horizontal-tb;
    margin-left: 0;
      font-size: 1em;
      background-color: rgb(71, 71, 71);
      padding: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100vw;
  }

  .menu a {
      margin: 0.5em;
      text-shadow: 0 0 1px #000;
      font-size: 1.7em;
      font-weight: 800;
      margin-right: 1em;
  }

  #content-projet a {
      min-width: 100%;
      max-width: 100%;
      height: 15em;

  }
  #content-title {
      margin-top: 10em;
  }
  #content-title h2 {
      font-size: 2em;
  }
  #content-title p {
      font-size: 1em;
  }
  .box-projet h1 {
      font-size: 1.5em;
  }
  
  span.tblanc3{
    display: none;
  }

  .box-projet h1{
    position: absolute;
    color: rgb(253, 245, 228);
    font-size: 4em;
  }

  #content-form{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5%;
    width: 45em;
  }



  #content-form form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  #content-form form input{
    width: 100%;
    height: 60px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px;
    color: rgb(253, 245, 228);
    background-color: rgba(234, 228, 238, 0.74);
  }

  #content-form form input:focus{
    border: #000428 1px solid;
  }

  #content-form form textarea{
    width: 100%;
    height: 100px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px;

    background-color: rgba(234, 228, 238, 0.74);
  }

  #content-form form input[type="submit"]{
    width: 40%;
    height: 65px;
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
    font-size: 2em;
    background-color: rgba(215, 172, 243, 0.74);
    cursor: pointer;
    border: none;
  }


}